<template>
  <page-header-wrapper @back="back">
    <template v-slot:breadcrumb>
      {{ formTitle }}
    </template>
    <template v-slot:title>
      {{ formTitle }} - {{ tableLabel }}
    </template>
    <template v-slot:content>
    </template>
    <template v-slot:extraContent>
    </template>
    <a-result title="请至少选择一个表修改" v-if="!tableName">
      <template #icon>
        <a-icon type="smile" theme="twoTone" />
      </template>
      <template #extra>
        <a-button type="primary" @click="back">
          返回生成页
        </a-button>
      </template>
    </a-result>
    <a-card :bordered="false" v-if="tableName">
      <a-tabs type="card" default-active-key="1">
        <a-tab-pane key="1" tab="字段属性" force-render>
          <column-index :tableName="tableName" :columnList="columnList" @reload="getColumnList" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="数据展示" force-render>
          <list-show-form :tableName="tableName" :columnList="columnList" @reload="getColumnList" ref="lsf" />
        </a-tab-pane>
        <a-tab-pane key="3" tab="表单构建" force-render>
          <k-form-design
            :freeColumns="columnList"
            :toolbars="formDesignConfig.toolbars"
            :fields="formDesignConfig.fields"
            @save="handleFormSave" 
            ref="kfd"
          />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import ColumnIndex from '../../column/index'
import ListShowForm from './ListShowForm'
import FormBuild from './FormBuild'
import { getTable, updateTable } from '@/api/free/table'
import { listColumn } from '@/api/free/column'
export default {
  name: 'GenEdit',
  components: {
    ColumnIndex,
    ListShowForm,
    FormBuild
  },
  data () {
    return {
      tableName: '',
      formTitle: '修改生成配置',
      // 表详细信息
      tableLabel: '',
      // 表字段列表
      columnList: [],
      formDesignConfig: {
        toolbars: [
          'save',
          'preview',
          'reset',
          'undo',
          'redo'
        ],
        fields: [
          'select',
          'button',
          'alert',
          'text',
          'html',
          'divider',
          'card',
          'tabs',
          'grid',
          'table'
        ]
      }
    }
  },
  created () {
  },
  mounted () {
    this.tableName = this.$route.query.tableName
    this.getTableInfo()
  },
  methods: {
    getTableInfo() {
      getTable(this.tableName).then(response => {
        this.tableLabel = response.tableLabel
        this.columnList = response.columnList || []
        this.$refs.lsf.initTargets(this.columnList)
        const { formJson } = response
        if(formJson) {
          this.$refs.kfd.handleSetData(JSON.parse(formJson))
        }
        
      })
    },
    getColumnList() {
      const params = {
        tableName: this.tableName
      }
      listColumn(params).then(response => {
        this.columnList = response
      }) 
    },
    /** 关闭按钮 */
    back () {
      this.$router.push('/tool/gen')
    },
    handleFormSave (data) {
      const params = {
        tableName: this.tableName,
        formJson: data
      }
      updateTable(params).then(res => {
        this.$message.success('保存成功')
      })
    }
  }
}
</script>
